<template>
  <div class="liudong">
    <div class="shang">
      <div class="waifang">
        <img
          src="../assets/images/yestoday.png"
          alt=""
          class="img1"
          style="margin-left: 50px"
        />
        <span style="margin: 0 30px"></span>
        <div>
          <p style="font-size: 20px">6</p>
          <p>昨日外来访客</p>
        </div>
      </div>
      <div class="waifang">
        <img
          src="../assets/images/today.png"
          alt=""
          class="img1"
          style="margin-left: 10px"
        />
        <span style="margin: 0 30px"></span>
        <div>
          <p style="font-size: 20px">13</p>
          <p>昨日外来访客</p>
        </div>
      </div>
    </div>
    <div class="liu" ref="liu"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, reactive, onMounted, watch } from "vue";
import { getFangke } from "../request/index";
const liu = ref(null);
const lll = ref();
const option = reactive({
  tooltip: {
    trigger: "axis",
  },
  grid: {
    left: "2%",
    right: "4%",
    bottom: "14%",
    top: "16%",
    containLabel: true,
  },
  legend: {
    data: ["昨日外来访客", "今日外来访客"],
    textStyle: {
      color: "#fff",
    },
    icon: "circle",
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月"],
    axisLine: {
      lineStyle: {
        color: "white",
      },
    },
    axisLabel: {
      textStyle: {
        fontFamily: "Microsoft YaHei",
      },
    },
  },

  yAxis: {
    type: "value",
    max: "1200",
    axisLine: {
      show: false,
      lineStyle: {
        color: "white",
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,0.3)",
      },
    },
    axisLabel: {},
  },
  series: [
    {
      name: "昨日外来访客",
      type: "bar",
      barWidth: "15%",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#fccb05",
            },
            {
              offset: 1,
              color: "#f5804d",
            },
          ]),
          barBorderRadius: 12,
        },
      },
      data: [800, 400, 200, 700, 100, 900],
    },
    {
      name: "今日外来访客",
      type: "bar",
      barWidth: "15%",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#8bd46e",
            },
            {
              offset: 1,
              color: "#09bcb7",
            },
          ]),
          barBorderRadius: 11,
        },
      },
      data: [300, 700, 200, 600, 500, 400],
    },
  ],
});
let asd;
onMounted(() => {
  asd = echarts.init(liu.value);
  asd.setOption(option);
  getFangke().then((res) => {

  });
});
window.addEventListener("resize", function () {
  asd.resize();
});
watch(option, () => {
  asd.setOption(option);
});
</script>

<style lang="scss">
.liudong {
  width: 80%;
  height: 80%;
  margin: 5% 10%;
  color: #fff;
  .liu {
    width: 83%;
    height: 80%;
    margin: 1% 9%;
  }
}

.shang {
  width: 100%;
  height: 80px;
  background: url("../imgs/tianqi.png") no-repeat;
  block-size: 100% 100%;
  background-position: center;
  overflow: hidden;
  display: flex;
}
.waifang {
  width: 50%;
  display: flex;
  margin-top: 20px;
  text-align: center;
}
.img1 {
  width: 30px;
  height: 30px;
}
</style>
